<template>
    <div class="reference-wrapper">
        <!-- 设置 -->
        <div class="reference-setting">
            <div class="title-wrapper">
                <!-- 数据 -->
                <span class="title">坐标数据</span>
                <!-- 错误提示 -->
                <span v-show="warning" class="warning"><i class="iconfont icon-cry"></i>{{warnMsg}}</span>
            </div>
            <textarea class="textarea" v-model="point"></textarea>
            <div class="btn-group">
                <span class="btn-item" @click="addOverlay('point')">添加点</span>
                <span class="btn-item" @click="addOverlay('line')">添加线</span>
                <span class="btn-item" @click="addOverlay('polygon')">添加面</span>
            </div>
        </div>
        <!-- 列表 -->
        <ul class="layer-list">
            <li :key="'ref'+index" v-for="(item, index) in list" class="layer-item" @click="moveToShape(item)">
                <h5 class="title">{{item.name}}</h5>
                <div class="layer-menu">
                    <span class="layer-menu-item" @click.stop="removeOverlay(item, index)"><i class="iconfont icon-delete"></i></span>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    import {mapState} from 'vuex';
    import {createUnitId, getObjLength} from 'utils/utils';
    import {addPoint, addLine, addPolygon} from 'utils/map';
    export default {
        data(){
            return {
                point: '',
                warning: false,
                warnMsg: '坐标格式不正确',
                eventMap: {
                    point: 'addPoint',
                    line: 'addLine',
                    gon: 'addGon'
                },
                list: []
            }
        },
        computed: mapState({
            mapObj: state => state.mapObj,
            referencePoints: state => state.referencePoints,
            reference: state => state.reference
        }),
        mounted(){
            //初始化赋值
            for(let i in this.referencePoints){
                if(!this.referencePoints[i]) continue;
                this.list.push(this.referencePoints[i]);
            }
        },
        methods: {
            addOverlay(type){
                let self = this;
                if(!this.point.length) return;
                //判断数据格式是否正确
                if(!this.isCorrectNumber(this.point)){
                    this.warnMsg = '存在非坐标字符';
                    this.warning = true;
                    return;
                }
                let item = {};
                item.id = createUnitId();
                item.name = '参照物' + getObjLength(this.reference);
                item.style = {};
                item.point = this.point;
                item.type = type;
                let shape = this.addShapeEvent(type, item);
                if(!shape){
                    this.warnMsg = '生成失败';
                    this.warning = true;
                    return;
                }
                this.mapObj.addOverlay(shape);
                this.saveOverlaysData(shape, item);
                this.list.push(item);
            },
            addShapeEvent(type, item){
                if(!item.point || !item.point.length) return;
                let result = null;
                switch(type){
                    case 'point': result = addPoint(this.mapObj, item);break;
                    case 'line': result = addLine(this.mapObj, item);break;
                    case 'polygon': result = addPolygon(this.mapObj, item);break;
                }
                return result;
            },
            //判断数据字符串格式是否正确
            isCorrectNumber(num){
                //错误返回0，正确返回1
                if(!num.length) return 0;
                //不能有字母
                let reg = new RegExp('[^0-9\.\;\,]+', 'g');
                if(reg.test(num)){
                    return false;
                }
                return true;
            },
            //保存形状数据
            saveOverlaysData(shape, item={}){
                let id = item.id || createUnitId(),
                    name = item.name || '参照物' + getObjLength(self.overlays),
                    style = item.style || {},
                    data = {};
                data[id] = {
                    id: id,
                    name: name,
                    type: item.type || this.active || '',
                    style: style,
                    overlay: shape
                }
                this.$store.dispatch('setReferenceData', data);
            },
            //移除参照物
            removeOverlay(item, index){
                if(!this.reference[item.id]) return;
                let reference = this.reference[item.id].overlay;
                this.mapObj.removeOverlay(reference);
                this.list.splice(index, 1);
                this.$store.dispatch('removeReferenceData', [item.id]);
            },
            //移动到图形
            moveToShape(item){
                let data = item.point.split(';')[0],
                    point = null;
                if(!data) return;
                point = new BMap.Point(data.split(',')[0], data.split(',')[1]);
                this.mapObj.panTo(point);
            }
        }
    }
</script>
<style lang="scss" scope>
    .reference-wrapper {
        .reference-setting {
            padding: 16px;
            border-bottom: 1px solid #ddd;
            .title-wrapper {
                height: 20px;
            }
            .title {
                font-size: 14px;
                line-height: 20px;
                color: #999;
            }
            .warning {
                margin-left: 10px;
                font-size: 12px;
                line-height: 20px;
                color: #dc0000;
                .iconfont {
                    margin-right: 5px;
                    font-size: 12px;
                }
            }
            .textarea {
                box-sizing: border-box;
                margin-top: 10px;
                padding: 8px;
                width: 100%;
                height: 100px;
                border: 1px solid #ddd;
                border-radius: 5px;
                resize: none;
            }
            .btn-group {
                box-sizing: border-box;
                margin-top: 10px;
                display: table;
                width: 100%;
                table-layout: fixed;
                border: 1px solid #00a2ca;
                .btn-item {
                    box-sizing: border-box;
                    display: table-cell;
                    height: 20px;
                    font-size: 14px;
                    text-align: center;
                    color: #00a2ca;
                    cursor: pointer;
                    & + .btn-item {
                        border-left: 1px solid #00a2ca;
                    }
                    &:hover {
                        background-color: #00a2ca;
                        color: #fff;
                    }
                }
            }
        }
        .layer-list {
            margin: 0;
            padding: 0;
            list-style: none;
            .layer-item {
                position: relative;
                padding: 16px;
                cursor: pointer;
                border-bottom: 1px solid #ddd;
                &.active {
                    background-color: #069abf;
                    color: #fff;
                }
                .title {
                    margin: 0;
                    padding-right: 30px;
                    font-size: 14px;
                    line-height: 20px;
                }
                .layer-menu {
                    position: absolute;
                    top: 16px;
                    right: 10px;
                    line-height: 20px;
                    .layer-menu-item {
                        & + .layer-menu-item {
                            margin-left: 10px;
                        }
                        .iconfont {
                            font-size: 14px;
                        }
                        &:hover {
                            .iconfont {
                                color: #00a2ca;
                            }
                        }
                    }
                }
            }
        }
    }
</style>


